<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border-radius: 50px;
            background: #e0e0e0;
            box-shadow: -20px 20px 41px #bebebe,
                20px -20px 41px #ffffff;
        }

        /* From Uiverse.io by csemszepp */
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            --hue: 220deg;
            --width: 15rem;
            --accent-hue: 22deg;
            --duration: 0.6s;
            --easing: cubic-bezier(1, 0, 1, 1);
        }

        .togglesw {
            display: none;
        }

        .switch {
            --shadow-offset: calc(var(--width) / 20);
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
            width: var(--width);
            height: calc(var(--width) / 2.5);
            border-radius: var(--width);
            box-shadow: inset 10px 10px 10px hsl(var(--hue) 20% 80%),
                inset -10px -10px 10px hsl(var(--hue) 20% 93%);
        }

        .indicator {
            content: '';
            position: absolute;
            width: 40%;
            height: 60%;
            transition: all var(--duration) var(--easing);
            box-shadow: inset 0 0 2px hsl(var(--hue) 20% 15% / 60%),
                inset 0 0 3px 2px hsl(var(--hue) 20% 15% / 60%),
                inset 0 0 5px 2px hsl(var(--hue) 20% 45% / 60%);
        }

        .indicator.left {
            --hue: var(--accent-hue);
            overflow: hidden;
            left: 10%;
            border-radius: 100px 0 0 100px;
            background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 80%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 60%) 30%, hsl(var(--accent-hue) 90% 50%) 60%, hsl(var(--accent-hue) 90% 60%) 75%, hsl(var(--accent-hue) 90% 50%));
        }

        .indicator.left::after {
            content: '';
            position: absolute;
            opacity: 0.6;
            width: 100%;
            height: 100%;
        }

        .indicator.right {
            right: 10%;
            border-radius: 0 100px 100px 0;
            background-image: linear-gradient(180deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 65%) 60%, hsl(var(--hue) 20% 70%) 70%, hsl(var(--hue) 20% 65%));
        }

        .button {
            position: absolute;
            z-index: 1;
            width: 55%;
            height: 80%;
            left: 5%;
            border-radius: 100px;
            background-image: linear-gradient(160deg, hsl(var(--hue) 20% 95%) 40%, hsl(var(--hue) 20% 65%) 70%);
            transition: all var(--duration) var(--easing);
            box-shadow: 2px 2px 3px hsl(var(--hue) 18% 50% / 80%),
                2px 2px 6px hsl(var(--hue) 18% 50% / 40%),
                10px 20px 10px hsl(var(--hue) 18% 50% / 40%),
                20px 30px 30px hsl(var(--hue) 18% 50% / 60%);
        }

        .button::before,
        .button::after {
            content: '';
            position: absolute;
            top: 10%;
            width: 41%;
            height: 80%;
            border-radius: 100%;
        }

        .button::before {
            left: 5%;
            box-shadow: inset 1px 1px 2px hsl(var(--hue) 20% 85%);
            background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 85%) 80%);
        }

        .button::after {
            right: 5%;
            box-shadow: inset 1px 1px 3px hsl(var(--hue) 20% 70%);
            background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 75%) 80%);
        }

        .togglesw:checked~.button {
            left: 40%;
        }

        .togglesw:not(:checked)~.indicator.left,
        .togglesw:checked~.indicator.right {
            box-shadow: inset 0 0 5px hsl(var(--hue) 20% 15% / 100%),
                inset 20px 20px 10px hsl(var(--hue) 20% 15% / 100%),
                inset 20px 20px 15px hsl(var(--hue) 20% 45% / 100%);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <!-- /* From Uiverse.io by csemszepp */ -->
    <div class="container">
        <label class="switch">
            <input class="togglesw" type="checkbox" checked="">
            <div class="indicator left"></div>
            <div class="indicator right"></div>
            <div class="button"></div>
        </label>
    </div>
</body>

</html>